<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox" style="width: 100%;">
          <div class="content_box whitebg">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>个人中心</span>
              </span>个人中心
            </h2>

            <el-row :gutter="10">
              <el-col :span="4">
                <Left/>
              </el-col>
              <el-col :span="20">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>我的兑换</span>
                  </div>
                  <div>
                    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
                      <el-form-item label="兑换编号" prop="number">
                        <el-input
                          v-model="queryParams.number"
                          placeholder="请输入编号"
                          clearable
                          @keyup.enter.native="handleQuery"/>
                      </el-form-item>
                      <el-form-item label="兑换状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="请选择状态" filterable clearable>
                          <el-option label="待发货" value="0"></el-option>
                          <el-option label="已发货" value="1"></el-option>
                          <el-option label="已签收" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetForm('queryParams')">重置</el-button>
                      </el-form-item>
                    </el-form>

                    <el-table v-loading="loading" :data="tableData" ref="tableRef" @selection-change="handleSelectionChange">
                      <el-table-column label="兑换编号" align="center" prop="number" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="兑换状态" align="center" prop="status" min-width="100" :show-overflow-tooltip='true'>
                        <template slot-scope="scope">
                          <el-tag v-if="scope.row.status === 0" :type="'success'" disable-transitions>待发货</el-tag>
                          <el-tag v-if="scope.row.status === 1" :type="'primary'" disable-transitions>已发货</el-tag>
                          <el-tag v-if="scope.row.status === 2" :type="'warning'" disable-transitions>已签收</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="兑换产品" align="center" prop="commodity.name" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="兑换数量" align="center" prop="quantity" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="耗费积分" align="center" prop="integrate" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="合计金额" align="center" prop="money" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="兑换时间" align="center" prop="creatTime" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="兑换者" align="center" prop="name" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="联系方式" align="center" prop="cellphone" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="地址" align="center" prop="address" min-width="120" :show-overflow-tooltip='true'/>
                      <el-table-column label="操作" align="center" fixed="right" width="240" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-position"
                            @click="handleDetails(scope.row)">
                            详情
                          </el-button>
                          <el-button
                            v-if="scope.row.status === 1"
                            size="mini"
                            type="text"
                            icon="el-icon-position"
                            @click="handleUpdate(scope.row)">
                            签收
                          </el-button>
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)">
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <el-pagination
                      layout="total, sizes, prev, pager, next, jumper"
                      background
                      v-show="total>0"
                      :total="total"
                      :current-page="queryParams.page"
                      :page-size="queryParams.limit"
                      :page-sizes="[10, 20, 30, 50]"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange">
                    </el-pagination>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </article>
    </div>

    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { dataCommodityOrders, dynamicListCommodityOrders, listLimitCommodityOrders, countCommodityOrders, dynamicCountCommodityOrders, allCommodityOrders, getCommodityOrders, detailsGetCommodityOrders, dynamicGetCommodityOrders, addCommodityOrders, editCommodityOrders, delCommodityOrders, delListCommodityOrders } from "@/api/commodityOrders";
  import { allUser } from '@/api/user'
  import { allCommodity } from '@/api/commodity'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Left from '../common/Left.vue'

  export default {
    name: "CommodityOrders",
    computed: {
      ...mapGetters([
        'userId',
      ])
    },
    components: {
      Header,
      Footer,
      Left
    },
    data() {
      // 表单数据空值效验
      const validateData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'));
        } else {
          callback();
        }
      }
      // 表单数据数字效验
      const validateNumberData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'));
        } else {
          if (Number.isInteger(value)) {
            callback();
          } else {
            callback(new Error('请输入数字'));
          }
        }
      }
      return {
        userList: [],
        commodityList: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tableData: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          page: 1,
          limit: 10,
          userId: null,
          status: null,
          number: null,
          name: null,
          cellphone: null,
          creatDate: null,
          commodityId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          id: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          creatTime: [{ required: true, trigger: 'blur', validator: validateData }],
          userId: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          status: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          number: [{ required: true, trigger: 'blur', validator: validateData }],
          name: [{ required: true, trigger: 'blur', validator: validateData }],
          cellphone: [{ required: true, trigger: 'blur', validator: validateData }],
          address: [{ required: true, trigger: 'blur', validator: validateData }],
          creatDate: [{ required: true, trigger: 'blur', validator: validateData }],
          year: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          month: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          commodityId: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          quantity: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          money: [{ required: true, trigger: 'blur', validator: validateData }],
        }
      };
    },
    created() {
      this.getData()
      this.allUser()
      this.allCommodity()
    },
    watch: {
      '$route': 'getData'
    },
    methods: {
      allUser(){
        this.loading = true
        allUser().then(response => {
          this.userList = response.data
          this.loading = false
        })
      },
      allCommodity(){
        this.loading = true
        allCommodity().then(response => {
          this.commodityList = response.data
          this.loading = false
        })
      },
      /** 查询分页数据 */
      getData() {
        this.loading = true;
        this.queryParams.userId = this.userId
        dataCommodityOrders(this.queryParams).then(response => {
          this.tableData = response.data
          this.total = response.count
          this.loading = false
        });
      },
      // 分页数据条数监听
      handleSizeChange(val) {
        this.loading = true
        this.queryParams.limit = val
        this.getData()
      },
      // 分页数据跳转监听
      handleCurrentChange(val) {
        this.loading = true
        this.queryParams.page = val
        this.getData()
      },
      // 搜索按钮操作
      handleQuery() {
        this.queryParams.page = 1
        this.getData()
      },
      // 重置按钮操作
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          creatTime: null,
          userId: null,
          status: null,
          number: null,
          name: null,
          cellphone: null,
          address: null,
          creatDate: null,
          year: null,
          month: null,
          commodityId: null,
          quantity: null,
          money: null
        };
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      },
      /** 详情按钮操作 */
      handleDetails(row) {
        this.$router.push({ path: '/commodity-details/' + row.commodityId })
      },
      /** 编辑按钮操作 */
      handleUpdate(row) {
        this.$confirm('确定签收吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.status = 2
          editCommodityOrders(row).then(response => {
            this.getData()
            this.$message.success('操作成功')
          })
        })
      },
      // 单个删除按钮操作
      handleDelete(row) {
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return delCommodityOrders(row.id)
        }).then(() => {
          this.getData()
          this.$message.success('删除成功')
        }).catch(() => {
        });
      },
    }
  };
</script>
